import React from 'react';
import { connect } from 'react-redux'
import menuRoute from "routes/menuRoute";
import {Button, Form, Switch} from 'antd';
const FormItem = Form.Item;
import {messages} from "share/common";
import "styles/setting/sub-application/module-display-mine.scss"
import SettingIcon from "images/setting/sub-application/sub-application-icon/setting.png"
import AboutUsIcon from "images/setting/sub-application/sub-application-icon/about-us.png"
import FeedbackIcon from "images/setting/sub-application/sub-application-icon/feedback.png"
// 暂时隐藏项的图标
// import AccountBindIcon from "images/setting/sub-application/sub-application-icon/account-bind.png"
// import CustomerServiceIcon from "images/setting/sub-application/sub-application-icon/customer-service.png"


class ModuleDisplayMine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      nativeSettingList: [{
        appName: messages('dashboard.key171')/*设置*/,
        appIcon: SettingIcon,
        appCode: "__fake_setting_code__",
        sectionId: 8,
        isEnabledKey: "",
        deep: 0,
        children: [{
          appName: messages('setting.key1715')/*账户与安全-修改登录密码*/,
          sectionId: 8,
          isEnabledKey: "enableSecuritypassword",
          deep: 1,
        }, {
          appName: messages('setting.key1716')/*新消息通知*/,
          sectionId: 8,
          isEnabledKey: "enableMessage",
          deep: 1,
        }]
      }
      // 需求5327 隐藏绑定账户 (注意是隐藏，说不定以后还要用)
      // , {
      //   appName: messages('setting.key1778')/*绑定账户*/,
      //   appIcon: AccountBindIcon,
      //   sectionId: 8,
      //   isEnabledKey: "enableAccountbind",
      //   deep: 0,
      //   children: [{
      //     appName: messages('setting.key1607')/*滴滴出行 - 新增手机号*/,
      //     sectionId: 8,
      //     isEnabledKey: "enableDidibind",
      //     deep: 1,
      //   }]
      // }
      , {
        // 帮助与反馈不允许控制，且默认显示
        appName: messages('setting.key1779')/*帮助与反馈*/,
        appIcon: FeedbackIcon,
        sectionId: 8,
        // isEnabledKey: "enableFeedback",
        isEnabledKey: "",
        deep: 0,
        // readonly: true,
        children: [{
          appName: messages('setting.key1613')/*在线客服*/,
          sectionId: 8,
          isEnabledKey: "enableCustomerservice",
          deep: 1,
        }, {
          appName: messages('setting.key1648')/*新手指导*/,
          sectionId: 8,
          isEnabledKey: "enableGuide",
          deep: 1,
        }, {
          appName: messages('setting.key1609')/*联系我们*/,
          sectionId: 8,
          isEnabledKey: "enableFeedbackContactus",
          deep: 1,
        }]
      }, {
        appName: messages('setting.key1863')/*关于我们*/,
        appIcon: AboutUsIcon,
        sectionId: 8,
        isEnabledKey: "enableAboutus",
        deep: 0,
        children: [{
          appName: messages('setting.key1609')/*联系我们*/,
          sectionId: 8,
          isEnabledKey: "enableContactus",
          deep: 1,
        }]
      }
      ],
      subApplication: menuRoute.getRouteItem('sub-application', 'key').url,   //子应用的页面项
    }
  }

  componentDidMount () {
    if(window.location.href.indexOf("privatization") !== -1){
      this.setState({
        subApplication: menuRoute.getRouteItem('sub-application-privatization','key'),//子应用管理私有化的页面项,
      })
    }
  }


  renderItem = (item, index) => {
    const { getFieldDecorator } = this.props.form;
    const { isEnabledKey, children = [], parentKey, appName, deep = 0, readonly, appIcon, isEnabled, appCode } = item;
    const { record } = this.props;
    if ((parentKey && !record[parentKey]) || appCode === 'FEEDBACK') {
      return;
    }
    return (
      <div className={`item-deep-${deep}`}>
        <FormItem colon={false}
                  label={
                    <div className={'label-wrapper'}>
                      {appIcon && <img className={'app-icon'} src={appIcon}/>}{appName}
                    </div>
                  }>
          {isEnabledKey ? getFieldDecorator(isEnabledKey, {
            valuePropName: 'checked',
            initialValue: record[isEnabledKey],
          })(
            <Switch disabled={readonly}/>
          ) : (
            isEnabled !== undefined ? getFieldDecorator(appCode, {
              valuePropName: 'checked',
              initialValue: item.isEnabled,
            })(
              <Switch disabled={readonly}/>
            ) : undefined
          )}
        </FormItem>
        {children && children.map((child, childIndex) => {
          child.parentKey = isEnabledKey;
          return (
            <div key={childIndex}>
              {this.renderItem(child, childIndex)}
            </div>
          )
        })}
      </div>
    )
  };

  render () {
    const { nativeSettingList } = this.state;
    const { record, loading, onSave } = this.props;
    const { widgetList } = record;
    const targetList = [...widgetList, ...nativeSettingList];
    let sectionIdCursor = 0;
    return (
        <div className={'module-display-mine'}>
          {/*<div className="fake-phone" style={{marginLeft: '50px'}}>*/}
            {/*<div className="phone-buttons">*/}
              {/*<div className="phone-camera"/>*/}
              {/*<div className="phone-button phone-button-power"/>*/}
              {/*<div className="phone-button phone-button-volume-up"/>*/}
              {/*<div className="phone-button phone-button-volume-down"/>*/}
              {/*<div className="phone-flash"/>*/}
            {/*</div>*/}
            {/*<div className="phone-content">*/}

            {/*</div>*/}
          {/*</div>*/}
          <div className={'module-display-sub-title'}>
            {messages('setting.key1603')/*我的设置*/}
          </div>
          <Form>
            {targetList.map((item, index) => {
              let { sectionId, isEnabledKey, appCode } = item,
                className = "";
              if ( sectionId && sectionIdCursor !== sectionId && appCode !== 'FEEDBACK') {
                sectionIdCursor = sectionId;
                className = 'section-wrapper'
              }
              return (
                <div  className={className}
                      key={index}>
                  {this.renderItem(item, index)}
                </div>
              )
            })}
          </Form>
          <Button type="primary"
                  loading={loading}
                  onClick={onSave}
                  style={{ marginRight: 8, marginTop: 10 }}>
            {messages('common.save')/*保存*/}
          </Button>
        </div>
    )
  }
}

ModuleDisplayMine.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {}
}


const wrappedEditHomePageCard = Form.create({
  onFieldsChange(props, changedFields) {
    props.onChange(changedFields);
  },
  mapPropsToFields(props) {
    return {
      record: Form.createFormField(props.record),
    };
  },
})(ModuleDisplayMine);
export default connect(mapStateToProps)(wrappedEditHomePageCard);
